<!DOCTYPE html>
<!--  文档声明也是一个节点 -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <!-- this is comment -->
        <strong class="dasd" id="ss"></strong>
        <span></span>
        <div>
            <p></p>
        </div>
        <em></em>
    </div>

    <script>

        var strong = document.getElementsByTagName('strong')[0];
        console.log(strong);
        console.log(strong.parentNode);// 父节点
        console.log(strong.parentNode.parentNode);
        console.log(strong.parentNode.parentNode.parentNode);
        console.log(strong.parentNode.parentNode.parentNode.parentNode);
        console.log(strong.parentNode.parentNode.parentNode.parentNode.parentNode); // document的父节点为空
        console.log(strong.parentElement);// 父元素节点
        console.log(strong.parentElement.parentElement);
        console.log(strong.parentElement.parentElement.parentElement);
        console.log(strong.parentElement.parentElement.parentElement.parentElement);// 注意，html元素没有父元素节点，只有父节点

        var div = document.getElementsByTagName('div')[0];
        console.log(div);
        console.log(div.childNodes);//子节点分不同类型
        console.log(div.childNodes[1]);
        console.log(div.firstChild);// 第一个子节点
        console.log(div.lastChild);

        console.log(div.children);// 元素子节点，最常用，而且兼容性好
        console.log(div.firstElementChild);
        console.log(div.lastElementChild);
        // 只操作元素节点的好用，但是兼容性不好


        var div1 = document.getElementsByTagName('div')[1];
        console.log(div1);
        console.log(div1.nextSibling);//下一个兄弟节点
        console.log(div1.nextSibling.nextSibling);
        console.log(div1.nextSibling.nextSibling.nextSibling);
        console.log(div1.nextSibling.nextSibling.nextSibling.nextSibling);
        console.log(div1.nextSibling.previousSibling);
    </script>
</body>

</html>